<template>
  <div class="activity">
    <van-nav-bar title="活动" left-arrow @click-left="onClickLeft" fixed />
    <div class="success">
      <div class="pic">
        <img src="../assets/images/success.png" alt />
      </div>
      <div class="text">
        <div class="prompt">报名成功</div>
        <div class="row" v-if="orderDetail.pay_status==1">已支付：¥{{orderDetail.total_money}}</div>
        <div class="row">签到时，直接展示自己电子票</div>
      </div>
    </div>
    <div class="attention">注意：您已报名成功，请下载现信App查看电子票二维码。</div>
    <div class="info" v-if="orderDetail.activity_info">
      <div class="card card1">
        <div class="pic">
          <img :src="orderDetail.activity_info.avatar" alt />
        </div>
        <div class="company">{{orderDetail.activity_info.username}}</div>
      </div>
      <div class="card card2">
        <div class="title">{{orderDetail.activity_info.title}}</div>
        <div
          class="time"
        >时间：{{orderDetail.activity_info.start_time|changeNum|formatDate("yyyy-MM-dd hh:mm")}}至{{orderDetail.activity_info.end_time|changeNum|formatDate("yyyy-MM-dd hh:mm")}}</div>
        <div
          class="address"
        >地点：{{orderDetail.activity_info.city}}{{orderDetail.activity_info.district}}</div>
      </div>

      <div class="card card3" v-for="(item,index) in orderDetail.tick_info" :key="index">
        <div
          class="name"
          v-for="(itemn,indexn) in item.user_set_values"
          :key="indexn"
        >{{itemn.name}}：{{itemn.value}}</div>
      </div>
    </div>
    <div class="footer">
      <div class="total">
        <img src="../assets/images/logo.png" alt />
        <span>下载现信App一起抢红包，找商机</span>
      </div>
      <div class="btn" @click="downloadApp">立即下载</div>
    </div>
    <div v-if="showBind">
      <bindPhone :uid="false" :activity_id="false"></bindPhone>
    </div>
  </div>
</template>
<script>
import vuefilter from "../common/vuefilter.js";
export default {
  name: "activity",
  filters: {
    formatDate: vuefilter.formatDate,
    changeNum: vuefilter.changeNum
  },
  data() {
    return {
      orderId: "",
      orderDetail: {},
      uid: "",
      activity_id: "",
      showBind:false,
    };
  },
  mounted() {
    if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    if (this.$route.query.activity_id) {
      this.activity_id = this.$route.query.activity_id;
    }
    // if (!this.$cookies.get("token")) {
    //   this.$router.push({
    //     path: "/login",
    //     query: {
    //       uid: this.uid,
    //       activity_id: this.activity_id
    //     }
    //   });
    //   return;
    // }
    this.orderId = this.$route.query.orderId;
    this.getOrderDetail();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getOrderDetail() {
      let params = {
        token: this.$cookies.get("token"),
        out_trade_no: this.orderId
      };
      const res = await this.$axios.post(this.$api.getActivityOrder, params);
      if (res.code == 1) {
        this.orderDetail = res.data;
      } else {
        this.$message({
          message: "获取订单信息失败：" + res.msg,
          type: "error"
        });
      }
    },
    //下载APP
    downloadApp() {
      if (this.$cookies.get("first_login")!=0) {
        this.showBind = true;
        return;
      }
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.location.href = this.$api.downloadUrl;
      }
      if (isAndroid) {
        window.location.href = this.$api.downloadUrl;
      }
    }
  }
};
</script>
<style scoped>
.activity {
  padding: 0.46rem 0 0.6rem;
}
.footer {
  padding: 0 0.12rem;
  display: flex;
  width: 100%;
  height: 0.6rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: -3px 0px 5px 0px rgba(51, 62, 65, 0.25);
  justify-content: space-between;
  align-items: center;
}
.footer .total {
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: #000;
  font-size: 13px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(1, 1, 1, 1);
}
.footer .total img {
  width: 0.36rem;
}
.footer .total span {
  padding-left: 0.13rem;
}
.footer .btn {
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: #fff;
  background: #00c6d8;
  justify-content: center;
  width: 0.78rem;
  height: 0.32rem;
  border-radius: 5px;
}
.success {
  padding: 0.12rem 0.23rem 0.2rem;
  background: #00c6d8;
  display: flex;
}
.success .pic img {
  width: 0.42rem;
  height: 0.42rem;
}
.success .text {
  padding-left: 0.2rem;
}
.success .text .prompt {
  font-size: 0.25rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 0.13rem;
}
.success .text .row {
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 0.13rem;
}
.attention {
  background: #fff;
  width: 100%;
  height: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(1, 1, 1, 1);
}
.info {
  margin-top: 0.1rem;
  padding: 0.1rem 0.15rem 0.2rem;
  background: #fff;
}
.info .card1 {
  display: flex;
  align-items: center;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid #dddddd;
}
.info .card1 .pic img {
  width: 0.3rem;
  height: 0.3rem;
}
.info .card1 .company {
  padding-left: 0.13rem;
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.info .card2 {
  padding: 0.2rem 0;
}
.info .card2 .title {
  font-size: 0.19rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 0.26rem;
}
.info .card2 .time,
.info .card2 .address {
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(59, 59, 59, 1);
  margin-bottom: 0.17rem;
}
.info .card3 {
  border-top: 1px solid #dddddd;
  padding-top: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(59, 59, 59, 1);
}
.info .card3 .name {
  margin-bottom: 0.2rem;
}
.van-nav-bar {
  background: #00c6d8;
}
.van-nav-bar .van-icon {
  color: #fff;
}
.van-nav-bar__title {
  color: #fff;
}
[class*="van-hairline"]::after {
  border: none;
}
</style>


